<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>

    <head>
        <%@ include file="jsp/static/head.jsp" %>
    </head>

    <style>
        /* Your existing styles here */
    </style>

    <body>
        <div id="main-container">
            <!-- Top Navigation -->
            <%@ include file="jsp/static/topNav.jsp" %>

                <!-- Menu -->
                <div id="menu-container" class="navbar">
                    <ul class="navbar-nav navbar-vertical" id="navUl">

                    </ul>
                </div>
                <!-- /Menu -->

                <!-- Breadcrumb -->
                <div id="breadcrumb-container">
                    <h3 class="breadcrumb-title">主页</h3>
                    <ol class="breadcrumb-list">
                        <li class="breadcrumb-item-home">
                            <a href="#">
                                <span class="ti-home"></span>
                            </a>
                        </li>
                    </ol>
                </div>
                <!-- /Breadcrumb -->

                <!-- Main Content -->
                <div id="home-container">
                    <div class="home-container-title" style="text-align:center">
                        <h1>欢迎使用&nbsp;高校勤工助学岗位管理系统</h1>
                    </div>

                    <!-- Cards -->
                    <div class="cards" id="p1"
                        style='width: 100%; margin: 50px 0; align-items: center; justify-content: center; display: flex'>
                        <!-- Card with bar chart -->
                        <div class="item"
                            style='border: 1px solid #ddd; box-shadow: 0 0px 0px rgba(0,0,0,.3); margin: 0 10px; border-radius: 0px; background: rgba(255,255,255,.6); display: flex; width: 30%'>
                            <div class="link"
                                style='border-color: #ddd; background: url(http://codegen.caihongy.cn/20230224/7b9ac76e6ed4427d925b003bcf9bf4c5.png) no-repeat center center / 60% auto; border-width: 0 1px 0 0; width: auto; min-width: 160px; border-style: solid; height: 120px'>
                            </div>
                            <div class="item-body"
                                style='width: 100%; align-items: center; flex-direction: column; justify-content: center; display: flex'>
                                <div class="num"
                                    style='margin: 5px 0; line-height: 24px; font-size: 20px; color: #333; font-weight: bold; height: 24px'>
                                    {{xueshengkaoqinCount}}</div>
                                <div class="name"
                                    style='margin: 5px 0; line-height: 24px; font-size: 16px; color: #666; height: 24px'>
                                    学生考勤总数</div>
                            </div>
                            
                        </div>
                        <!-- /Card with bar chart -->
                    </div>
                    <!-- /Cards -->
                    <div class="container">
                                            <!-- Card with pie chart -->
                    <div class="item"
                    style='border: 1px solid #ddd; box-shadow: 0 0px 0px rgba(0,0,0,.3); margin: 0 10px; border-radius: 0px;'>

                    <div id="pieChart" style="width: 80%; height: 400px;"></div>
                </div>

                    </div>

                    <!-- Chart container for bar chart -->
                    <div class="homeCharts">
                        <div id="xueshengkaoqinMain1" v-if="crossBtnControl2('xueshengkaoqin','首页统计')" class="graph"
                            style="width: 100%; height: 300px;"></div>
                    </div>
                    <!-- /Chart container for bar chart -->

                    <div class="layui-carousel" id="ID-carousel-demo-1">

                      <div carousel-item>

                        <div>
                            <img src="https://p0.itc.cn/q_70/images03/20201211/b2b6b792bc5c4687982b444c03d301ec.png" style="width:100%;height:100%"/>
                        </div>

                                                <div>
                                                    <img src="https://p5.itc.cn/q_70/images03/20230424/238fb70dbc0d48c6a91e80cb63d511e6.jpeg" style="width:100%;height:100%"/>
                                                </div>

                                                <div>
                                                    <img src="https://p0.itc.cn/q_70/images03/20210709/16a9d6333450460ab1e9b5dcd2dcda98.jpeg" style="width:100%;height:100%"/>
                                                </div>


                      </div>

                    </div>

                </div>
                <!-- /Main Content -->
        </div>

        <!-- Back to Top -->
        <a id="back-to-top" href="#" class="back-to-top">Top</a>
        <!-- /Back to Top -->

        <%@ include file="jsp/static/foot.jsp" %>
            <script src="${pageContext.request.contextPath}/resources/js/echarts.min.js"></script>
            <script src="${pageContext.request.contextPath}/resources/js/vue.min.js"></script>

            <script>
        <%@include file = "jsp/utils/menu.jsp" %>
        <%@include file = "jsp/static/setMenu.js" %>
        <%@include file = "jsp/utils/baseUrl.jsp" %>
        <%@include file = "jsp/static/crossBtnControl.js" %>
        <%@include file = "jsp/static/logout.jsp" %>

        var vm = new Vue({
            el: '#home-container',
            data: {
                xueshengkaoqinCount: 0,
            }
        });

                function getxueshengkaoqinCount() {
                    $.ajax({
                        type: "GET",
                        url: baseUrl + `xueshengkaoqin/count`,
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("token", window.sessionStorage.getItem('token'));
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                vm.xueshengkaoqinCount = data.data;
                            } else if (data.code == 401) {
                        <%@include file = "jsp/static/toLogin.jsp" %>
                    } else {
                                layer.msg(data.msg);
                            }
                        },
                    });
                }

                function xueshengkaoqinchartDialog1() {
                    $.ajax({
                        type: "GET",
                        url: baseUrl + "xueshengkaoqin/group/xueshengxingming",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("token", window.sessionStorage.getItem('token'));
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                if (data.data != null) {
                                    let res = data.data;
                                    let xAxis = [];
                                    let yAxis = [];
                                    let pArray = []
                                    for (let i = 0; i < res.length; i++) {
                                        xAxis.push(res[i].xueshengxingming);
                                        yAxis.push(parseFloat((res[i].total)));
                                        pArray.push({
                                            value: parseFloat((res[i].total)),
                                            name: res[i].xueshengxingming
                                        })
                                    }

                                    var myChart = echarts.init(document.getElementById('xueshengkaoqinMain1'), 'macarons');
                                    var option = {};
                                    option = {
                                        title: {
                                            text: '考勤统计',
                                            left: 'center'
                                        },
                                        tooltip: {
                                            trigger: 'item',
                                            formatter: '{b} : {c}'
                                        },
                                        xAxis: {
                                            type: 'category',
                                            data: xAxis
                                        },
                                        yAxis: {
                                            type: 'value'
                                        },
                                        series: [{
                                            data: yAxis,
                                            type: 'bar'
                                        }]
                                    };

                                    myChart.setOption(option);
                                }
                            } else if (data.code == 401) {
                        <%@include file = "jsp/static/toLogin.jsp" %>
                    } else {
                                layer.msg(data.msg);
                            }
                        },
                    });
                }

                function picData() {
                    $.ajax({
                        type: "GET",
                        url: baseUrl + "xuesheng/poor/data",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("token", window.sessionStorage.getItem('token'));
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                if (data!= null) {
                                    // Initialize pie chart
                                    var pieChart = echarts.init(document.getElementById('pieChart'));
                                    var pieOption = {
                                        title: {
                                            text: '学生贫困占比',
                                            left: 'center'
                                        },
                                        tooltip: {
                                            trigger: 'item',
                                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                                        },
                                        legend: {
                                            orient: 'vertical',
                                            left: 10,
                                            data: data.legendData
                                        },
                                        series: [{
                                            name: '贫困状态',
                                            type: 'pie',
                                            radius: ['50%', '70%'],
                                            avoidLabelOverlap: false,
                                            label: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {
                                                label: {
                                                    show: true,
                                                    fontSize: '20',
                                                    fontWeight: 'bold'
                                                }
                                            },
                                            labelLine: {
                                                show: false
                                            },
                                            data: data.seriesData
                                        }]
                                    };
                                    pieChart.setOption(pieOption);
                                }
                            } else if (data.code == 401) {
                        <%@include file = "jsp/static/toLogin.jsp" %>
                    } else {
                                layer.msg(data.msg);
                            }
                        },
                    });
                }

                $(document).ready(function () {
                    if (window.localStorage.getItem("Token") != null && window.localStorage.getItem("Token") != 'null') {
                        if (window.sessionStorage.getItem("token") == null || window.sessionStorage.getItem("token") == 'null') {
                            window.sessionStorage.setItem("token", window.localStorage.getItem("Token"));
                            console.log("当前role:"+window.localStorage.getItem("role"))
                            window.sessionStorage.setItem("role", window.localStorage.getItem("role"));
                            window.sessionStorage.setItem("accountTableName", window.localStorage.getItem("sessionTable"));
                            window.sessionStorage.setItem("username", window.localStorage.getItem("adminName"));
                        }
                    }
                    if(window.sessionStorage.getItem("role") == "学生"){
                        $('#p1').hide();
                        $('#pieChart').hide();
                    }
                    if(window.sessionStorage.getItem("role") != "学生"){
                       $('#ID-carousel-demo-1').hide();
                    }

                    layui.use(function(){

                      var carousel = layui.carousel;

                      // 渲染 - 设置时间间隔、动画类型、宽高度等属性

                      carousel.render({

                        elem: '#ID-carousel-demo-1',

                        width: 'auto',

                        height: '700px'

                      });

                    });





                    $('.dropdown-menu h5').html(window.sessionStorage.getItem('username') + '(' + window.sessionStorage.getItem('role') + ')')
                    $('.sidebar-header h3 a').html(projectName)
                    var token = window.sessionStorage.getItem("token");
                    if (token == "null" || token == null) {
                        layer.msg("请登录后再操作");
                        window.location.href = ("jsp/login.jsp");
                    }
                    setMenu();
            <%@include file = "jsp/static/myInfo.js" %>
                        getxueshengkaoqinCount();
                    xueshengkaoqinchartDialog1()
                    picData();
                });
            </script>
    </body>

    </html>